<template>
  <div class="userContainer" :style="'min-height: '+docheight+'px'">
    <div v-if="!showTimeOut&&showCont">
      <div class="headCont">
        <img class="headBgImg" src="static/img/banner4.jpg" />
        <div class="userMask">
          <div class="centerTop">
            <div class="userCont">
              <div class="userImg">
                <img :src="userInfo.head_img+ossSrc">
                <div class="svipTag" v-if="userInfo.is_member==2">svip</div>
              </div>
              <div class="userInfo">
                <div class="userName">{{ userInfo.nick_name }} </div>
              </div>
            </div>
            <div class="topCard">
              <div class="cardItem">
                <div class="cardName">消费金额</div>
                <div class="cardVal">{{ userInfo.consumption_price }}</div>
              </div>
              <div class="cardLine"></div>
              <div class="cardItem" @click="toMoney">
                <div class="cardName">账户余额</div>
                <div class="cardVal">{{ userInfo.balance }}</div>
              </div>
              <div class="cardLine"></div>
              <div class="cardItem" @click="toLike">
                <div class="cardName">收藏列表</div>
                <div class="cardVal">{{ userInfo.collect_num }}</div>
              </div>
            </div>
            <div class="vipCont" v-if="userInfo.is_member==1&&Number(userInfo.shop_info.shop_membership_fee)>0">
              <div class="vipTag">svip</div>
              <div class="vipInfo">
                <div class="vipInfoName">开通超级会员，立省更多</div>
                <div class="vipInfoDes">超值全场<span class="showText">{{ (userInfo.shop_info.member_discount/10).toFixed(1) }}</span> 折！</div>
              </div>
              <div class="openVip" @click="toPay">立即开通</div>
            </div>
          </div>
        </div>
      </div>
      <div class="centerList">
        <div :class="index==0?'noTop listItem':'listItem'" @click="listFn(item)" :key="index" v-for="(item,index) in listArr">
          <img class="listItemImg" :src="item.icon+ossSrc" />
          <div class="listItemVal">
            {{item.val}} <span v-if="userInfo.is_member==2&&item.val=='会员中心'">(有效至：{{ userInfo.member_expiration_time }})</span>
          </div>
          <img class="nextImg" src="static/img/next.png" />
        </div>
      </div>
      <div class="userTip">
          <div class="telLine"><span class="iconfont icon-kefu2"></span> 技术热线:18483613963</div>
          <div>技术支持:四川省本地鸟科技有限公司</div>
      </div>
    </div>
    <footcpm></footcpm>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <toast v-model="showToast" width="50%" position="middle" type="text" :time="1000">{{showText}}</toast>
  </div>
</template>

<script>
import {Toast } from 'vux'
import footcpm from '@/components/footcpm'
import { my } from '@/http/api'
import getLoad from '@/components/public/getLoad'
import getTimeOut from '@/components/public/getTimeOut'
export default {
  components:{getTimeOut,getLoad,Toast,footcpm},
  data(){
    return{
      showTimeOut: false,
      showCont:false,
      showText:'',
      showToast:false,
      listArr:[
        {val:'会员中心',icon:'static/img/vip.png'},
        {val:'我的购物车',icon:'static/img/car.png'},
        {val:'我的优惠券',icon:'static/img/coupon.png'},
        {val:'我的消费记录',icon:'static/img/money.png'},
      ],
      userInfo:{},
    }
  },
  methods:{
    toMoney(){
      this.$router.push({path:'/userMoney'})
    },
    getData(){
      my().then((res)=>{
        if(res.data.code==1){
          this.userInfo = res.data.data
        }else{
          this.showToast = true
          this.showText = '用户信息获取失败'
        }
        this.showCont= true
      }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
        })
    },
    toLike(){
      this.$router.push({path:'/saveGoods'})
    },
    listFn(item){
      if(item.val=='我的购物车'){
        this.$router.push({path:'/car',query:{is_member:this.userInfo.is_member,member_discount:this.userInfo.shop_info.member_discount}})
      }else if(item.val=='我的优惠券'){
        this.$router.push({path:'/coupon'})
      }else if(item.val=='我的消费记录'){
        this.$router.push({path:'/record'})
      }else if(item.val=='会员中心'){
        this.toPay()
      }
    },
    toPay(){
      this.$router.push({path:'/payVip'})
    },
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="less">
.userContainer{
  background-color: #f9f1f1;

  width: 100%;
  padding-bottom:3.5rem;
  box-sizing: border-box;
  .headCont{
    font-size: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    .headBgImg{
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      // filter: blur(1px);
    }
    .userMask{
      width: 100%;
      // left: 0;
      background-color: rgba(0,0,0,0.2);
      position: relative;
      // top: 0;
      box-sizing: border-box;
      width: 100%;
      z-index: 2;
      // height: 100%;
      display: flex;
      flex-direction: column-reverse;
      .centerTop{
        padding: 1.5rem 4% 1.25rem;
        box-sizing: border-box;
        
        font-size: 0.7rem;
        .userCont{
          width: 100%;
          // align-items: center;
          // display: flex;
          .userImg{
            width: 4rem;
            height: 4rem;
            position: relative;
            margin: 0 auto;
            border-radius: 50%;
            border: 3px solid #fff;
            .svipTag{
              color: gold;
              position: absolute;
              bottom: 0;
              right: -0.5rem;
              background-color: gold;
              padding: 0.1rem 0.5rem;
              border-radius: 1rem;
              color: white;
            }
            .boyIcon{
              background-color: rgb(103, 83, 218);
            }
            img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .userInfo{
            color: rgb(240,240,240);
            text-align: center;
            margin-top: 0.75rem;
            .userName{
              font-size: 0.8rem;
              font-weight: bold;
            }
            .vipTime{
              font-size: 0.6rem;
            }
            
          }
          .seticon{
            margin-right: 1.5rem;
            font-size:1.2rem;
            color: white;
          }
        }
        .topCard{
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 1rem;
          align-items: center;
          .cardLine{
            height: 1.5rem;
            width: 1px;
            background-color: #ddd;
          }
          .cardItem{
            width: 50%;
            text-align: center;
            padding: 0.5rem 0;
            color: white;
            .cardName{
              font-size: 0.7rem;
            }
            .cardVal{
              font-size: 1rem;
              font-weight: bold;
              margin-top: 0.4rem;
            }
          }
        }
        .vipCont{
          width: 100%;
          margin-top: 0.75rem;
          background-color: rgba(0,0,0,0.5);
          display: flex;
          border-radius: 0.5rem;
          padding:0.5rem 0.5rem;
          box-sizing: border-box;
          color: rgb(151, 122, 49);
          justify-content: space-between;
          align-items: center;
          .vipTag{
            color: gold;
            font-size: 1rem;
            margin-left: 0.5rem;
          }
          .vipInfoDes{
            font-size: 0.6rem;
            .showText{
              color: rgb(223, 175, 56);
              font-size: 1rem;
              margin: 0 0.25rem;
            }
          }
          .openVip{
            padding: 0.35rem 0.75rem;
            background-color:rgb(223, 175, 56);
            color: white;
            font-size: 0.6rem;
            border-radius: 1rem;
          }
        }
      }
    }
    
  }
  .centerList{
    width: 92%;
    padding: 0 4%;
    margin: 0 auto;
    margin-top: 1rem;
    box-sizing: border-box;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: #fff;
    // display: flex;
    // justify-content: space-between;
    .listItem{
      width: 100%;
      // background-color: #fff;
      // text-align: center;
      // padding: 0.5rem 0;
      color: #e95551;
      display: flex;
      border-top: 1px dashed #f9f1f1;
      align-items: center;
      padding: 0.5rem 0.75rem;
      box-sizing: border-box;
      .listItemImg{
        height: 1.5rem;
      }
      .listItemVal{
        font-size: 0.6rem;
        margin:0 0.75rem;
        width: 1rem;
        flex: 1;
      }
      .nextImg{
        height: 0.75rem;
      }
    }
    .noTop{
      border-top: none;
    }
  }
  .userTip{
      color: #e95551;
      // position: absolute;
      font-size: 0.6rem;
      text-align: center;
      // bottom: 4rem;
      // left: 0;
      width: 100%;
      margin-top: 5rem;
      .telLine{
        margin-bottom: 0.75rem;
      }
  }
}
</style>
